<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">

	.bg{
		background-color: #eaedf1;
		margin: 0px;
		padding: 0px;
	}
	.bgblack{
		width: 282px;
		height:221px;
		top:50%;
		left:50%;
		margin-left: -141px;
		margin-top: -110px;
		background-color: black;
		position: absolute;
		border-radius: 10px;
	}
	.SIGN{
		top:14%;
		margin-top:-10px; 
		margin-left: 100px;
		font-size: 20px;
		position: absolute;
	}
	.bgblue{
		width: 254px;
		height:136px;
		top:50%;
		left:5%;
		margin-top:-50px;
		position:absolute;
		background-color: #00afd1;
		border-radius: 10px;
	}
	.in1{
		top:50%;
		margin-top: -60px;
		left: 5px;
		width: 238px;
		height: 35px;
		background-color: #eaedf1;
		position:absolute;
		font-size: 15px;
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		border:none;
		border-bottom:1px solid #00afd1;
	}
	.in2{
		top:50%;
		margin-top: -22px;
		left: 5px;
		width: 238px;
		height: 35px;
		background-color: #eaedf1;
		position:absolute;
		font-size: 15px;
		border-bottom-left-radius:8px;
		border-bottom-right-radius:8px;
		border:none;
	}
	.continue{
		top:50%;
		margin-top:21px;
		left: 5px;
		width: 238px;
		height: 35px;
		background-color: black;
		position:absolute;
		font-size: 16px;
		border-radius: 8px;
		border:none;
	}
	.continue:active{
		background-color: #FFF;
	}
</style>
</head>
<body class="bg">
	<div class="bgblack">
	   <span class="SIGN" style="color:#e6eff2">SIGN IN</span>
	   <div class="bgblue">
	   		<input class="in1" style="color:#79858a" type="text" name="username" value="  Name:">
	   		<input class="in2" style="color:#79858a" type="text" name="password" value="  Password:">
	   		<button class="continue" style="color:#e6eff2">CONTINUE</button>
	   </div>
	</div>
</body>
</html>